<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 用户列表
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!--https://blog.csdn.net/weixin_30439067/article/details/95721811-->
    </div>
    <div class="container">
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column fixed prop="prove_id" label="加分证明id" width="150"></el-table-column>
        <el-table-column prop="activity_id" label="活动id" width="150"></el-table-column>
        <el-table-column prop="prove_description" label="活动描述" width="150"></el-table-column>
        <el-table-column  prop="topic" label="加分证明主题" width="150"></el-table-column>
        <el-table-column prop="prove_url" label="加分证明图片" width="250">
 <!--  eslint-disable-next-line --> <!--https://blog.csdn.net/HanXiaoXi_yeal/article/details/115365751-->
            <template #default="scope">
                        <img :src="scope.row.prove_url" alt style="width: 150px;height:100px">
            </template>
        </el-table-column>
        <el-table-column prop="user_id" label="用户id" width="160"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { provelist } from "../api/other";
export default {
  name: "provelist",
  data() {
    return {
      tableData: [],
      form: {
        prove_id: 1,
        activity_id: 1,
        prove_url: "http://localhost:8085/static/restaurantRes/0526djh.jpg",
        prove_description: "华南理工大学广州学院经济学院第七届班级辩论赛揭幕赛加分证明特此证明加德育分一分",
        topic: "华南理工大学广州学院经济学院第七届班级辩论赛揭幕赛加分证明",
        user_id: "oy7Y_5T9GafnJE8i8bl31BTA8QV4",
        // create_time: null,
        // update_time: null,
        // is_delete: 0
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      provelist().then(res => {
          console.log(res)
        this.tableData = res.data.list;
      });
    },
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
